﻿@using xConnected.Common.ExpertProfile
<div class="modal-wide hide fade" id="TechnologySkillsProfileDialog" style="display: none;" >
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div class="thumbnail"  style="margin-bottom: 10px">
            <div style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <div class="row">
                    <label class="span6"><strong>@Resources.AddTechnology</strong></label>
                </div>
                <div class="row">
                    <div class="span3"><label class="span3" style="margin-left: 0px">@Resources.Technology</label></div> 
                    <div class="span2"><label class="span2" style="margin-left: 0px">@Resources.Level</label></div> 
                    <div class="span2"><label class="span2" style="margin-left: 0px">@Resources.Experience</label></div> 
                </div>
                <div class="row">
                    <div class="span3"><input id="tSkillProfileEditMode" class="span3"/></div>
                    <div data-bind="with: profile" class="span5">
                        <div data-bind="with: workingTechnologySkill" class="span5" style="margin-left: 0px">
                            <div class="span2" style="margin-left: 0px">
                                <select class="span2" data-bind="options: $root.profile.levels, optionsText: 'Description',optionsValue: 'Value', value: Level"></select>
                            </div>
                            <div class="span2">
                                <select class="span2" data-bind="options: $root.profile.experiences, optionsText: 'Description',optionsValue: 'Value', value: Experience"></select>
                            </div>
                            <button style="margin-left: 10px; margin-bottom: 10px" class="btn btn-small" data-bind="click: function() { $root.profile.addTechnologySkill();}"><i class="icon-plus"></i></button>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
        <div data-bind="with: profile" class="thumbnail">
            <div data-bind="with: workingProfileBuffer" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <div class="row">
                    <label class="span6"><strong>@Resources.SelectedTechnologySkills</strong></label>
                </div>
                <div style="padding-top: 10px">
                    <ul class="thumbnails" data-bind="foreach: TechnologySkills">
                        <li class="span3">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Technology: </span><span data-bind=" text: TechnologyName" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.removeTechnologySkill($data); }"><i class="icon-trash"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: ExperienceText" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.profile.okTechnologySkills();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.profile.cancelTechnologySkills();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>